<template>
  <div>
    <div class="operation-area">
      <el-input
        placeholder="请输入学号"
        v-model="searchParams.id"
        clearable
        style="width: 120px; margin-right: 20px"
      ></el-input>
      <el-input
        placeholder="请输入姓名"
        v-model="searchParams.name"
        clearable
        style="width: 120px; margin-right: 20px"
      ></el-input>
      <el-input
        placeholder="请输入年龄"
        v-model="searchParams.age"
        clearable
        style="width: 120px; margin-right: 20px"
      ></el-input>
      <el-select
        v-model="searchParams.sex"
        clearable
        placeholder="请选择性别"
        style="width: 120px; margin-right: 20px"
      >
        <el-option
          v-for="item in sexOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="searchParams.college"
        clearable
        placeholder="请选择学院"
        style="width: 120px; margin-right: 20px"
        @change="handleCollegeChange"
      >
        <el-option
          v-for="item in collegeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="searchParams.depart"
        clearable
        placeholder="请选择专业"
        style="width: 120px; margin-right: 20px"
        @change="handleDepartChange"
      >
        <el-option
          v-for="item in departOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="searchParams.lass"
        clearable
        placeholder="请选择班级"
        style="width: 120px; margin-right: 20px"
      >
        <el-option
          v-for="item in classOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch"
        >搜索</el-button
      >
    </div>
    <div style="margin-left: 25px; margin-bottom: 10px">
      <el-button
        type="primary"
        plain
        @click="openAddDrawer"
        style="width: 120px"
        >新增</el-button
      >
      <el-button
        type="danger"
        plain
        @click="handleBatchDelete"
        style="margin-left: 20px; width: 120px"
        >批量删除</el-button
      >
    </div>

    <el-table
      :data="stuList"
      border
      style="width: 100%"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        prop="id"
        label="学号"
        width="140"
        align="center"
      ></el-table-column>
      <el-table-column label="图片" width="200" align="center">
        <template slot-scope="scope">
          <img :src="scope.row.photo" />
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="140"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="140"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="140"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="college"
        label="学院"
        width="240"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="depart"
        label="专业"
        width="240"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="lass"
        label="班级"
        width="240"
        align="center"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.row)"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="openEditDrawer(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer :visible.sync="editDrawerVisible" :with-header="false">
      <h1 style="text-align: center">编辑学生信息</h1>
      <el-form :model="editForm" label-width="80px">
        <el-form-item label="学号">
          <el-input v-model="editForm.id" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="editForm.age" clearable></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="editForm.sex" clearable placeholder="请选择性别">
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院">
          <el-select
            v-model="editForm.college"
            clearable
            placeholder="请选择学院"
            @change="handleCollegeChange"
          >
            <el-option
              v-for="item in collegeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-select
            v-model="editForm.depart"
            clearable
            placeholder="请选择专业"
            @change="handleDepartChange"
          >
            <el-option
              v-for="item in departOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="editForm.lass" clearable placeholder="请选择班级">
            <el-option
              v-for="item in classOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            :action="$baseUrl + '/upload'"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="editForm.avatar"
              :src="$baseUrl + editForm.avatar"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleEditSubmit">提交</el-button>
          <el-button @click="editDrawerVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
    <el-drawer :visible.sync="addDrawerVisible" :with-header="false">
      <h1 style="text-align: center">添加学生信息</h1>
      <el-form :model="addForm" label-width="80px">
        <el-form-item label="学号">
          <el-input v-model="addForm.id" clearable></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="addForm.name" clearable></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="addForm.age" clearable></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="addForm.sex" clearable placeholder="请选择性别">
            <el-option
              v-for="item in sexOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院">
          <el-select
            v-model="addForm.college"
            clearable
            placeholder="请选择学院"
            @change="handleCollegeChange"
          >
            <el-option
              v-for="item in collegeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="专业">
          <el-select
            v-model="addForm.depart"
            clearable
            placeholder="请选择专业"
            @change="handleDepartChange"
          >
            <el-option
              v-for="item in departOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级">
          <el-select v-model="addForm.lass" clearable placeholder="请选择班级">
            <el-option
              v-for="item in classOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAddSubmit">提交</el-button>
          <el-button @click="addDrawerVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {
  getStudent,
  addStudent,
  batchDeleteStudent,
  deleteStudent,
  updateStudent,
  findStudent,
  findColleges,
  findDeparts,
  findLasss,
} from "@/api/student";

export default {
  name: "Student",
  data() {
    return {
      stuList: [],
      searchParams: {
        id: "",
        name: "",
        age: "",
        sex: "",
        college: "",
        depart: "",
        lass: "",
      },
      sexOptions: [
        { value: "男", label: "男" },
        { value: "女", label: "女" },
      ],
      collegeOptions: [],
      departOptions: [],
      classOptions: [],
      multipleSelection: [],
      editDrawerVisible: false,
      addDrawerVisible: false,
      editForm: {
        id: "",
        name: "",
        age: "",
        sex: "",
        college: "",
        depart: "",
        lass: "",
        avatar: "", //upload/2025-03-06/adfsadsf.jpg
      },
      addForm: {
        id: "",
        name: "",
        age: "",
        sex: "",
        college: "",
        depart: "",
        lass: "",
        avatar: "", //upload/2025-03-06/adfsadsf.jpg
      },
      imageUrl: "",
    };
  },
  created() {
    this.getData();
    this.loadColleges();
  },
  methods: {
    handleAvatarSuccess(res, file) {
      //上传成功之后的回调函数
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.editForm.avatar = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    getData() {
      getStudent().then((res) => {
        this.stuList = res.data;
      });
    },
    loadColleges() {
      findColleges().then((res) => {
        this.collegeOptions = res.data.map((college) => ({
          value: college,
          label: college,
        }));
      });
    },
    handleCollegeChange(college) {
      if (college) {
        findDeparts(college).then((res) => {
          this.departOptions = res.data.map((depart) => ({
            value: depart,
            label: depart,
          }));
          this.classOptions = []; // 清空班级选项
        });
      } else {
        this.departOptions = [];
        this.classOptions = [];
      }
    },
    handleDepartChange(depart) {
      if (depart) {
        findLasss(depart).then((res) => {
          this.classOptions = res.data.map((lass) => ({
            value: lass,
            label: lass,
          }));
        });
      } else {
        this.classOptions = [];
      }
    },
    handleSearch() {
      findStudent(this.searchParams).then((res) => {
        this.stuList = res.data;
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleDelete(row) {
      this.$confirm("确定删除该学生吗？", "提示", {
        type: "warning",
      }).then(() => {
        deleteStudent(row.id).then(() => {
          this.$message.success("删除成功");
          this.getData();
        });
      });
    },
    handleBatchDelete() {
      const ids = this.multipleSelection.map((item) => item.id);
      if (this.multipleSelection.length === 0) {
        this.$message.warning("请选择要删除的学生");
        return;
      }
      console.log("选中的学生ID:", ids); // 调试信息
      this.$confirm("确定删除选中的学生吗？", "提示", {
        type: "warning",
      }).then(() => {
        batchDeleteStudent(ids)
          .then(() => {
            this.$message.success("批量删除成功");
            this.getData(); // 刷新数据
          })
          .catch((error) => {
            console.error("批量删除失败:", error); // 调试信息
            this.$message.error("批量删除失败");
          });
      });
    },
    openEditDrawer(row) {
      this.editForm = { ...row };
      this.editDrawerVisible = true;
    },
    handleEditSubmit() {
      updateStudent(this.editForm).then(() => {
        this.$message.success("更新成功");
        this.editDrawerVisible = false;
        this.getData();
      });
    },
    openAddDrawer() {
      this.addForm = {
        id: "",
        name: "",
        age: "",
        sex: "",
        college: "",
        depart: "",
        lass: "",
      };
      this.addDrawerVisible = true;
    },
    handleAddSubmit() {
      addStudent(this.addForm).then(() => {
        this.$message.success("添加成功");
        this.addDrawerVisible = false;
        this.getData();
      });
    },
  },
};
</script>

<style scoped>
.operation-area {
  margin: 20px 25px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>